<template>
    <div class="view">
        <android-nav-bar title="我的礼物" v-on:back="back"></android-nav-bar>
        <div class="gift-wrap">
            <cube-tab-bar v-model="selectedLabel" :showSlider="true" :data="tabs">
                <cube-tab v-for="(item, index) in tabs" :label="item.key" :key="item.key">
                    <div class="gift-tab">{{item.label}}</div>
                </cube-tab>
            </cube-tab-bar>
            <cube-tab-panels v-model="selectedLabel">
                <cube-tab-panel key="get" label="get">
                    <div class="gift-content">
                        <cube-scroll ref="getScroll" :options="scrollOptions" :data="getGiftList" @pulling-down="onPullingDownByGet" @pulling-up="onPullingUpByGet">
                            <div class="gift-item" v-for="gift in getGiftList">
                                <div class="gift-image">
                                    <img :src="gift.image.file_path+'?imageView2/0/h/65'">
                                </div>
                                <div class="gift-data">
                                    <div class="gift-data-from">
                                        <span class="big">{{gift.from.nickName}}</span>
                                        <span class="normal">赠送你</span>
                                        <span class="big">{{gift.snap_name}}</span>
                                        <span class="small">×1</span>
                                    </div>
                                    <div class="gift-data-time">{{gift.create_time | timeStamp | timeFilter}}</div>
                                </div>
                                <div class="gift-money gift-money-add">+{{gift.total_price}}</div>
                            </div>
                        </cube-scroll>
                    </div>
                </cube-tab-panel>
                <cube-tab-panel key="give" label="give">
                    <div class="gift-content">
                        <cube-scroll ref="giveScroll" :options="scrollOptions" :data="giveGiftList" @pulling-down="onPullingDownByGive" @pulling-up="onPullingUpByGive">
                            <div class="gift-item" v-for="gift in giveGiftList">
                                <div class="gift-image">
                                    <img :src="gift.image.file_path">
                                </div>
                                <div class="gift-data">
                                    <div class="gift-data-from">
                                        <span class="big">{{gift.to.nickName}}</span>
                                        <span class="normal">收到你赠送</span>
                                        <span class="big">{{gift.snap_name}}</span>
                                        <span class="small">×1</span>
                                    </div>
                                    <div class="gift-data-time">{{gift.create_time | timeStamp | timeFilter}}</div>
                                </div>
                                <div class="gift-money gift-money-reduce">-{{gift.total_price}}</div>
                            </div>
                        </cube-scroll>
                    </div>
                </cube-tab-panel>
            </cube-tab-panels>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineGiftLog extends Scene {
        private selectedLabel = "get";
        private getGiftPage: number = 1;
        private giveGiftPage: number = 1;
        private pageSize: number = 15;
        private getGiftList: any[] = [];
        private getGiftTotal: number = 0;
        private giveGiftList: any[] = [];
        private giveGiftTotal: number = 0;
        private scrollOptions: any = {
            pullDownRefresh: {
                threshold: 60,
                stop: 40,
                txt: "更新成功",
            },
            pullUpLoad: {
                txt: {more: "加载中", moMore: "没有更多数据了"}
            }
        };

        private get tabs(): any[] {
            return [{
                label: `收到礼物（${this.getGiftTotal}）`,
                key: "get"
            }, {
                label: `送出礼物（${this.giveGiftTotal}）`,
                key: "give"
            }];
        }

        @State("UserStore")
        public user!: InterfaceUser;

        private back(): void {
            this.navigateBack();
        }

        private mounted() {
            this.$nextTick(() => {
                this.getGetGiftList();
                this.getGiveGiftList();
            });
        }

        private async getGetGiftList(): Promise<any> {
            const res = await Http.get(this.api.getMyGiftList, {page: this.getGiftPage, size: this.pageSize}, {token: this.user.token});
            if (res.code === 1) {
                this.getGiftTotal = res.data.total;
                if (this.getGiftPage === 1) {
                    this.getGiftList.splice(0, this.getGiftList.length);
                }

                if (res.data.data.length > 0) {
                    this.getGiftList.push(...res.data.data);
                    this.getGiftPage++;
                } else {
                    (<any> this).$refs.getScroll.forceUpdate(false, true);

                }
                // this.getGiftList.push(...res.data.data);
            }
        }

        private async getGiveGiftList(): Promise<any> {
            const res = await Http.get(this.api.getMyGiftSendList, {page: this.giveGiftPage, size: this.pageSize}, {token: this.user.token});
            if (res.code === 1) {
                this.giveGiftTotal = res.data.total;
                if (this.giveGiftPage === 1) {
                    this.giveGiftList.splice(0, this.giveGiftList.length);
                }

                if (res.data.data.length > 0) {
                    this.giveGiftList.push(...res.data.data);
                    this.giveGiftPage++;
                } else {
                    (<any> this).$refs.giveScroll.forceUpdate(false, true);

                }
                // this.getGiftList.push(...res.data.data);
            }
        }

        private onPullingUpByGet() {
            setTimeout(() => {
                this.getGetGiftList();
            }, 500);
        }

        private onPullingDownByGet() {
            this.getGiftPage = 1;
            this.$nextTick(() => {
                setTimeout(() => {
                    this.getGetGiftList();
                }, 300);
            });
        }

        private onPullingUpByGive() {
            setTimeout(() => {
                this.getGiveGiftList();
            }, 500);
        }

        private onPullingDownByGive() {
            this.giveGiftPage = 1;
            this.$nextTick(() => {
                setTimeout(() => {
                    this.getGiveGiftList();
                }, 300);
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .gift-wrap
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));

            >>> .cube-tab
                padding 0;

            .gift-tab
                height 44px;
                line-height 44px;
                background #fff;

            .gift-content
                height calc(100vh - 47px - var(--safe-area-inset-top) - 44px);
                width 100vw;
                position relative;
                border-top 1px solid #eee


        .gift-item
            height 70px;
            width 100vw;
            position relative;
            display flex;
            background #fff;
            padding 10px 12px 10px 10px;
            /*justify-content center;*/
            align-items center;

            &::after
                content ''
                display block;
                position absolute;
                left 12px;
                right 0;
                height 1px;
                bottom 0;
                background #ccc
                transform scaleY(.5);

            .gift-image
                flex 0 0 50px;
                height 50px;

                img
                    width 50px;
                    height 50px;

            .gift-data
                flex 1
                display flex;
                height 50px;
                padding 1px 6px 1px 12px;
                flex-direction column;
                justify-content space-between

                .gift-data-from
                    line-height 19px;
                    color $theme-common-color
                    font-size 13px;

                    > .big
                        font-size 15px;

                    > .normal
                        padding 0 5px;

                    > .small
                        padding-left 6px;
                        font-size 12px;

                .gift-data-time
                    font-size 12px;
                    color #aaa;


            .gift-money
                flex 0 0 70px;
                text-align right;
                font-size 16px;

                &.gift-money-add
                    color #f85e52;
                &.gift-money-reduce
                    color #6BCC03
</style>
